<template>
  <div id="loadings">
    <div class="loadContant">
      <div class="sk-folding-cube">
        <div class="sk-cube1 sk-cube"></div>
        <div class="sk-cube2 sk-cube"></div>
        <div class="sk-cube4 sk-cube"></div>
        <div class="sk-cube3 sk-cube"></div>
      </div>
      <div class="loadingText">加载中...</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script>

<style lang='less'>
/* loading动画 */
#loadings {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255);
  position: fixed;
  z-index: 10000;
  .loadContant {
    position: relative;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    .sk-folding-cube {
      width: 50px;
      height: 50px;
      margin: 18px auto;
      position: relative;
      -webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
      .sk-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
      }
      .sk-cube:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #666;
        -webkit-animation: foldCubeAngle 2.4s infinite linear both;
        animation: foldCubeAngle 2.4s infinite linear both;
        -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
      }
      .sk-cube2 {
        -webkit-transform: scale(1.1) rotateZ(90deg);
        transform: scale(1.1) rotateZ(90deg);
      }
      .sk-cube2:before {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
      }
      .sk-cube3 {
        -webkit-transform: scale(1.1) rotateZ(180deg);
        transform: scale(1.1) rotateZ(180deg);
      }
      .sk-cube3:before {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
      }
      .sk-cube4 {
        -webkit-transform: scale(1.1) rotateZ(270deg);
        transform: scale(1.1) rotateZ(270deg);
      }
      .sk-cube4:before {
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
      }
    }
    .loadingText {
      color: #444;
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing: 1.5px;
      text-align: center;
      width: 100%;
      margin: 40px auto;
      -webkit-animation: fade 2s infinite;
      -moz-animation: fade 2s infinite;
    }
  }
}

@-webkit-keyframes foldCubeAngle {
  0%,
  10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }

  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }

  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes foldCubeAngle {
  0%,
  10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }

  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }

  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@-webkit-keyframes fade {
  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes fade {
  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes fade {
  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade {
  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}
</style>
